<template>
    <div></div>
</template>
    
<script setup>
import { inject, onMounted } from 'vue';
import { Logo, Zoom, Fullscreen, MouseLocation, MapTheme } from '@antv/l7'

onMounted(() => {
      
const { scene,map } = inject("$scene_map");

    const zoom = new Zoom({
          zoomInTitle: '放大',
          zoomOutTitle: '缩小',
          position: 'bottomright'
    });
    scene.addControl(zoom);

    const fullscreen = new Fullscreen({
          btnText: '全屏',
          exitBtnText: '退出全屏',
    });
    scene.addControl(fullscreen)
    const mouseLocation = new MouseLocation({
          transform: (position) => {
                return position;
          },
          position: 'rightbottom',
    });
    scene.addControl(mouseLocation);
    const mapTheme = new MapTheme({});
    scene.addControl(mapTheme);
})
</script>
<style>
.l7-control-zoom {
    margin-bottom: 40px !important;
}

</style>